<script setup>
	import {
		h,
		ref,
		reactive
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		Search
	} from '@element-plus/icons-vue'

	const router = useRouter()
	const route = useRoute()

	const tableData = ref([{
		name: '崔宏强的模版',
		num: 3,
		type: 0,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 0
	}, {
		name: '崔宏强的模版',
		num: 3,
		type: 0,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 0
	}, {
		name: '模板名称123',
		num: 0,
		type: 1,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 1
	}, {
		name: '模板名称456',
		num: 0,
		type: 1,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 2
	}, {
		name: '崔宏强的模版',
		num: 3,
		type: 0,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 0
	}, {
		name: '崔宏强的模版',
		num: 3,
		type: 0,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 0
	}, {
		name: '模板名称123',
		num: 0,
		type: 1,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 1
	}, {
		name: '模板名称456',
		num: 0,
		type: 1,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 2
	}, {
		name: '模板名称123',
		num: 0,
		type: 1,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 1
	}, {
		name: '模板名称456',
		num: 0,
		type: 1,
		registrant: '张三',
		contacts: '张三',
		email: 'test@190.vip',
		update_date: '2024-11-04',
		status: 2
	}])


	const tableData2 = ref([{
		name: 'xabntih.cn',
		new_template: '崔宏强的模版',
		old_template: '崔宏强的模版',
		time: '2024-11-04 11:01:06',
		status: 0
	}, {
		name: 'nazhuai.cn',
		new_template: '长期持有模版',
		old_template: '长期持有模版',
		time: '2024-11-04 11:01:06',
		status: 1
	}, {
		name: 'fuzhuangren.com.cn',
		new_template: '准备出售的',
		old_template: '准备出售的',
		time: '2024-11-04 11:01:06',
		status: 2
	}, {
		name: 'mashuang.com.cn',
		new_template: '可以竞价的',
		old_template: '可以竞价的',
		time: '2024-11-04 11:01:06',
		status: 0
	}, {
		name: 'xabntih.cn',
		new_template: '崔宏强的模版',
		old_template: '崔宏强的模版',
		time: '2024-11-04 11:01:06',
		status: 0
	}, {
		name: 'nazhuai.cn',
		new_template: '长期持有模版',
		old_template: '长期持有模版',
		time: '2024-11-04 11:01:06',
		status: 1
	}, {
		name: 'fuzhuangren.com.cn',
		new_template: '准备出售的',
		old_template: '准备出售的',
		time: '2024-11-04 11:01:06',
		status: 2
	}, {
		name: 'mashuang.com.cn',
		new_template: '可以竞价的',
		old_template: '可以竞价的',
		time: '2024-11-04 11:01:06',
		status: 0
	}, {
		name: 'fuzhuangren.com.cn',
		new_template: '准备出售的',
		old_template: '准备出售的',
		time: '2024-11-04 11:01:06',
		status: 2
	}, {
		name: 'mashuang.com.cn',
		new_template: '可以竞价的',
		old_template: '可以竞价的',
		time: '2024-11-04 11:01:06',
		status: 0
	}])

	const dialogVisible = ref(false)
	const dialogVisible2 = ref(false)
	const dialogVisible3 = ref(false)

	const placeholder = "查找域名/后缀 如：.cn \r多个域名/后缀用换行分隔"

	const dmName = ref(false)

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}

	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const form = reactive({})

	const currentPage = ref(1)
	const total = 1000

	const activeTab = ref(0)

	const options = ref([{
		label: '模版一',
		value: 1
	}, {
		label: '模版一',
		value: 2
	}, {
		label: '未设置模版',
		value: 0
	}])

	const transferform = reactive({})

	const templateform = reactive({
		type: 1
	})

	const domainform = reactive({})

	const multipleSelection = ref([])

	const tableData3 = ref([{
		name: 'mzlhskj.cn',
		registrar: '190vip'
	}, {
		name: 'lrdspt.cn',
		registrar: 'ename'
	}, {
		name: 'bjfyhtshop.cn',
		registrar: 'xw'
	}, {
		name: '0731s.cn',
		registrar: '190vip'
	}, {
		name: 'zmxuan2.cn',
		registrar: '190vip'
	}])


	const tableData4 = ref([{
		name: '崔宏强的模板',
		registrant: '张三',
		type: 1
	}, {
		name: '企业1的模板',
		registrant: '北京荟米科技有限公司',
		type: 2
	}, {
		name: '长期持有的',
		registrant: '张三',
		type: 1
	}, {
		name: '临时的模板',
		registrant: '张三',
		type: 1
	}, {
		name: '模板名称456',
		registrant: '深圳英迈思信息技术',
		type: 1
	}])

	const tableData5 = ref([{
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}])

	const total3 = ref(86)

	const total4 = ref(9)

	const domainShow = ref(true)
	const domainShow2 = ref(false)
	const domainShow3 = ref(false)

	const radio = ref(null)
	const templateSelection = ref({})

	const enterpriseOptions = ref([{
		label: '已认证的身份/邮箱1',
		value: 1
	}, {
		label: '已认证的身份/邮箱2',
		value: 2
	}, {
		label: '已认证的身份/邮箱3',
		value: 3
	}])

	const countryOptions = ref([{
		label: '中国',
		value: 'cn'
	}, {
		label: '美国',
		value: 'us'
	}, {
		label: '英国',
		value: 'en'
	}])

	const cityOptions = ref([{
		value: 'beijing',
		label: '北京',
		children: [{
			value: 'beijing',
			label: '北京',
		}]
	}, {
		value: 'tianjing',
		label: '天津',
		children: [{
			value: 'tianjing',
			label: '天津',
		}]
	}, {
		value: 'shanghai',
		label: '上海',
		children: [{
			value: 'shanghai',
			label: '上海',
		}]
	}, {
		value: 'zhejiang',
		label: '浙江',
		children: [{
			value: 'hangzhou',
			label: '杭州',
		}, {
			value: 'ningbo',
			label: '宁波',
		}]
	}])


	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const getCurrentRow = (row) => {
		templateSelection.value = row
	}


	const switchTab = (tabId) => {
		activeTab.value = tabId;
	};

	const getStringLen = (str) => {
		if (str) {
			let arr = str.split('\n')
			return arr.length
		} else {
			return 0
		}
	}

	const addClick = () => {
		domainShow.value = false
		domainShow2.value = true
	}

	const domainBack = () => {
		domainShow.value = true
		domainShow2.value = false
	}

	const domainSelect = () => {
		let arr = multipleSelection.value.map(item => item.name)
		transferform.nameStr = arr.join('\n')
		domainShow.value = true
		domainShow2.value = false
	}

	const addTemplate = () => {
		domainShow.value = false
		domainShow3.value = true
	}

	const templateBack = () => {
		domainShow.value = true
		domainShow3.value = false
	}

	const templateSelect = () => {
		domainShow.value = true
		domainShow3.value = false
	}

	const onSubmit = () => {
		dialogVisible.value = false
		dialogVisible2.value = true
	}

	const templateClick = () => {
		router.push('/my-domains')
	}

	const handleViews = (row) => {
		router.push('/template-details')
	}

	const onCreate = () => {
		dialogVisible3.value = false
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			icon: 'WarningFilled',
			confirmButtonText: '返回重试',
			message: h('div', null, [
				h('h4', null, '创建失败'),
				h('p', {
					style: 'color: #999999'
				}, '失败原因'),
			]),
			showCancelButton: false,
			type: 'error'
		}).then(() => {
			dialogVisible3.value = true
		})
	}
</script>
<template>
	<div class="container">
		<div class="top-title">
			我的模版
		</div>
		<div class="top-area flex-between">
			<div class="area-item" @click="switchTab(0)">
				<div class="area-item-left">
					<i class="iconfont icon-user"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">个人模板</div>
					<div class="area-item-val">95</div>
				</div>
			</div>
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-qiyefuwu"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">企业模板</div>
					<div class="area-item-val">17</div>
				</div>
			</div>
			<div class="area-item" @click="dialogVisible = true">
				<div class="area-item-left">
					<i class="iconfont icon-iconfontzhizuobiaozhun02969696"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">域名过户</div>
				</div>
			</div>
			<div class="area-item" @click="switchTab(3)">
				<div class="area-item-left">
					<i class="iconfont icon-jilu"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">过户记录</div>
				</div>
			</div>
		</div>
		<div class="table-box" v-if="activeTab == 0">
			<div class="table-tool">
				<div class="tool-left">
					<el-button type="warning" @click="dialogVisible3 = true">创建模版</el-button>
				</div>
				<div class="tool-right">
					<el-input v-model="form.search" style="width: 240px" placeholder="输入关键词查询" clearable
						prefix-icon="Search"></el-input>
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
				<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="模板名称" width="200">
					<template #default="scope">
						{{scope.row.name}}<span @click="templateClick" class="num"
							v-if="scope.row.num > 0">({{scope.row.num}})</span><span v-else>({{scope.row.num}})</span>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="类型" width="120">
					<template #default="scope">
						<span v-if="scope.row.type == 0">个人</span>
						<span v-if="scope.row.type == 1">企业</span>
					</template>
				</el-table-column>
				<el-table-column prop="registrant" label="注册人">
				</el-table-column>
				<el-table-column prop="contacts" label="联系人">
				</el-table-column>
				<el-table-column prop="email" label="邮箱">
				</el-table-column>
				<el-table-column prop="update_date" label="更新日期">
				</el-table-column>
				<el-table-column prop="status">
					<template #header>
						<el-select v-model="form.status" placeholder="状态" style="width: 100px">
							<el-option label="审核中" :value="0"></el-option>
							<el-option label="已通过" :value="1"></el-option>
							<el-option label="未通过" :value="2"></el-option>
						</el-select>
					</template>
					<template #default="scope">
						<span v-if="scope.row.status == 0" class="td-purple">审核中</span>
						<span v-if="scope.row.status == 1" class="td-success">已通过</span>
						<span v-if="scope.row.status == 2" class="td-error">未通过</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<div class="operate-btns">
							<el-button link @click="handleViews(scope.row)"
								:disabled="scope.row.status == 2">查看</el-button>
							<el-button link :disabled="scope.row.status == 0 || scope.row.status == 2">过户</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="pager-box">
				<div class="pager-total">
					搜索结果共{{total}}条
				</div>
				<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
					:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
		<div class="table-box" v-if="activeTab == 3">
			<div class="table-tool">
				<div class="tool-left">
					搜索结果共{{total}}条
				</div>
				<div class="tool-right">
					<el-input v-model="form.search" style="width: 240px" placeholder="输入关键词查询" clearable
						prefix-icon="Search"></el-input>
				</div>
			</div>
			<el-table :data="tableData2" style="width: 100%" show-overflow-tooltip>
				<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="域名">
					<template #default="scope">
						<el-button link><span class="warn">{{scope.row.name}}</span></el-button>
					</template>
				</el-table-column>
				<el-table-column prop="new_template" label="新模板">
				</el-table-column>
				<el-table-column prop="old_template" label="原模板">
				</el-table-column>
				<el-table-column prop="time" label="提交时间">
				</el-table-column>
				<el-table-column prop="status">
					<template #header>
						<el-select v-model="form.status" placeholder="状态" style="width: 100px">
							<el-option label="处理中" :value="0"></el-option>
							<el-option label="已过户" :value="1"></el-option>
							<el-option label="过户失败" :value="2"></el-option>
						</el-select>
					</template>
					<template #default="scope">
						<span v-if="scope.row.status == 0" class="td-purple">处理中</span>
						<span v-if="scope.row.status == 1" class="td-success">已过户</span>
						<span v-if="scope.row.status == 2" class="td-error">过户失败</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="pager-box">
				<div class="pager-total">
					搜索结果共{{total}}条
				</div>
				<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
					:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
		<el-dialog v-model="dialogVisible" width="520">
			<template #header>
				<div class="dialog-header" v-if="domainShow">
					<span class="dialog-title">域名过户</span>
				</div>
				<div class="dialog-header" v-if="domainShow2">
					<el-icon @click="domainBack">
						<ArrowLeftBold />
					</el-icon>
					<span class="dialog-title">选择域名</span>
				</div>
				<div class="dialog-header" v-if="domainShow3">
					<el-icon @click="templateBack">
						<ArrowLeftBold />
					</el-icon>
					<span class="dialog-title">选择模板</span>
				</div>
			</template>
			<div class="transfer-form" v-if="domainShow">
				<div class="form-item">
					<div class="form-item-label">过户域名：</div>
					<div class="form-item-content">
						<div class="wrapdmTextarea textarea-box">
							<div class="textarea-warp" style="z-index: 200; top: 0;">
								<textarea id="textarea" placeholder="请输入要过户的域名，多条请换行分隔"
									class="ui-input dmTextarea dmTyping" name="domain" style="overflow-y: auto;"
									v-model="transferform.nameStr"></textarea>
								<div class="textarea-limit">
									{{getStringLen(transferform.nameStr)}}/100
								</div>
							</div>
						</div>
						<el-button icon="Plus" @click="addClick">我的域名</el-button>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label">目标模板：</div>
					<div class="form-item-content">
						<el-button class="select-mb btn-default" @click="addTemplate">
							<span v-if="templateSelection.name">{{templateSelection.name}}</span>
							<span v-else>
								<el-icon>
									<Plus />
								</el-icon>选择过户到的实名模板
							</span>
						</el-button>
					</div>
				</div>
			</div>
			<div v-if="domainShow2">
				<div class="domains-form">
					<span class="label">快速查找</span>
					<div class="wrapdmTextarea">
						<div class="textarea-warp" style="z-index: 200; top: 0;">
							<div class="textarea-suffix">
								<img src="../../assets/img/search.png" alt="" />
							</div>
							<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
								@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''"
								style="overflow-y: auto;" v-model="domainform.nameStr"></textarea>
						</div>
					</div>
					<el-select v-model="domainform.template" placeholder="选择域名模板" style="width: 200px">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="domains-table">
					<div class="table-tool">
						<div class="tool-left">搜索结果共{{total3}}条，已选择{{multipleSelection.length}}条。</div>
					</div>
					<el-table ref="multipleTableRef" :data="tableData3" @selection-change="handleSelectionChange"
						style="width: 100%" show-overflow-tooltip>
						<el-table-column type="selection" width="50"></el-table-column>
						<el-table-column prop="name" label="域名">
						</el-table-column>
						<el-table-column prop="registrar" label="注册商">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div v-if="domainShow3">
				<div class="domains-form">
					<span class="label">快速查找</span>
					<el-input placeholder="输入关键词" :suffix-icon="Search" style="width: 200px;"></el-input>
				</div>
				<div class="domains-table">
					<div class="table-tool">
						<div class="tool-left">搜索结果共{{total4}}条。</div>
					</div>
					<el-table ref="multipleTable2" :data="tableData4" style="width: 100%" show-overflow-tooltip
						height="285">
						<el-table-column width="50">
							<template #default="scope">
								<el-radio :value="scope.$index" v-model="radio"
									@change.native="getCurrentRow(scope.row)"> </el-radio>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="模板名称">
						</el-table-column>
						<el-table-column prop="registrant" label="注册人">
						</el-table-column>
						<el-table-column prop="type" label="模板类型">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer" v-if="domainShow">
					<el-button @click="dialogVisible = false" >取 消</el-button>
					<el-button type="warning" @click="onSubmit">
						确 认
					</el-button>
				</div>
				<div class="dialog-footer" v-if="domainShow2">
					<el-button @click="domainBack">返 回</el-button>
					<el-button type="warning" @click="domainSelect">
						选 择
					</el-button>
				</div>
				<div class="dialog-footer" v-if="domainShow3">
					<el-button @click="templateBack" >返 回</el-button>
					<el-button type="warning" @click="templateSelect">
						选 择
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="dialogVisible2" title="域名过户结果" width="520">
			<el-table :data="tableData5" style="width: 100%" show-overflow-tooltip height="285">
				<el-table-column prop="name" label="域名">
				</el-table-column>
				<el-table-column prop="old_template" label="原模板">
				</el-table-column>
				<el-table-column prop="result" label="结果">
				</el-table-column>
			</el-table>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="warning" @click="dialogVisible2 = false">
						确 认
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="dialogVisible3" title="创建模板" width="520">
			<template #header>
				<div class="dialog-header">
					<span class="dialog-title">创建模板</span>模板创建后无法修改信息，只能删除。
				</div>
			</template>
			<el-form :model="templateform" label-width="90px">
				<el-form-item label="模板名称：">
					<el-input v-model="templateform.name" placeholder="请输入模板名称" maxlength="50" style="width: 220px;" />
				</el-form-item>
				<el-form-item label="模板类型：">
					<el-radio-group v-model="templateform.type">
						<el-radio :value="1">个人</el-radio>
						<el-radio :value="2">企业</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="企业名称：" v-if="templateform.type == 2">
					<el-select v-model="templateform.enterprise" placeholder="请选择" style="width: 220px;">
						<el-option v-for="item in enterpriseOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
					<el-button link class="rz-btn">去认证 +</el-button>
				</el-form-item>
				<el-form-item label="联 系 人：">
					<el-select v-model="templateform.contacts" placeholder="请选择" style="width: 220px;">
						<el-option v-for="item in enterpriseOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
					<el-button link class="rz-btn">去认证 +</el-button>
				</el-form-item>
				<el-form-item label="邮 箱：">
					<el-select v-model="templateform.email" placeholder="请选择" style="width: 220px;">
						<el-option v-for="item in enterpriseOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
					<el-button link class="rz-btn">去认证 +</el-button>
				</el-form-item>
				<el-form-item label="国 家：">
					<el-select v-model="templateform.country" placeholder="请选择" style="width: 220px;">
						<el-option v-for="item in countryOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="所在城市：" v-if="templateform.country == 'cn'">
					<el-cascader v-model="templateform.city" :options="cityOptions" style="width: 220px;" />
				</el-form-item>
				<el-form-item label="联系地址：">
					<el-input v-model="templateform.address" placeholder="请输入联系地址" style="width: 220px;" />
					<span style="margin-left: 15px;">无需再输入省、市、区县</span>
				</el-form-item>
				<el-form-item label="邮政编码：">
					<el-input v-model="templateform.postalCode" placeholder="请输入邮政编码" style="width: 220px;" />
				</el-form-item>
				<el-form-item label="联系电话：">
					<el-input v-model="templateform.phone" placeholder="+86" style="width: 220px;" />
				</el-form-item>
				<el-form-item label="传真号码：">
					<el-input v-model="templateform.fax" placeholder="+86" style="width: 220px;" />
				</el-form-item>
				<el-form-item>
					<div class="form-btns">
						<el-button @click="dialogVisible3 = false">取 消</el-button>
						<el-button @click="onCreate" type="warning">创 建</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<style scoped lang="scss">
	.table-box {
		background: #FFFFFF;
		box-shadow: 0px 0px 14px 0px #00000017;
		border-radius: 10px;
		padding: 20px;
	}

	.table-box .num {
		color: #F68A0C;
		cursor: pointer;
	}
	
	
	.transfer-form .form-item {
		display: flex;
		margin-bottom: 20px;
	}

	.form-item-label {
		width: 70px;
		line-height: 32px;
	}

	.form-item-content {
		flex: 1;
		min-width: 0;
	}

	.textarea-box {
		width: 100%;
		margin-bottom: 15px;
		height: 180px;
	}

	.textarea-limit {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.select-mb {
		width: 100%;
		border-style: dashed;
	}

	.domains-form {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		.label {
			width: 70px;
		}

		.wrapdmTextarea {
			width: 200px;
			margin-right: 14px;
		}
	}

	.domains-table {
		.table-tool {
			padding-bottom: 10px;
		}
	}

	.rz-btn {
		margin-left: 15px;
		color: rgb(39, 17, 119);
	}

	.rz-btn:hover {
		color: rgb(39, 17, 119);
		text-decoration: underline;
	}

	.form-btns {
		text-align: right;
		width: 100%;
	}

	.el-button.is-disabled.is-link {
		color: #999 !important;
	}
</style>